import React, { Component } from "react";
import "./index.css";
import "antd/dist/antd.css";
import { Input, Button, List, Popconfirm,message } from "antd";
import store from "../../store";
import {CloseOutlined,CheckOutlined} from "@ant-design/icons"
import axios from "axios";
// 设置url 前缀
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/";
/*配置请求拦截器  
  为每一的api 挂载一个Authorization 请求头,把值设为 token */
// axios.interceptors.request.use(config => {
//   config.headers.Authorization = window.sessionStorage.getItem('token')
//   return config
// })

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();

    this.storeChange = this.storeChange.bind(this);
  }

  componentDidMount() {
    //订阅
    store.subscribe(this.storeChange);
    //调用接口

    // 调用登录接口
    axios
      .post("login", {
        username: "admin",
        password: "123456",
      })
      .then((res) => {
        //设置token
        axios.interceptors.request.use((config) => {
          config.headers.Authorization = res.data.data.token;
          return config;
        });
        const queryInfo = {
          query: "",
          pagenum: 1,
          pagesize: 2,
        };
        axios
          // .get("users", {
          //   params:queryInfo
          // })
          .get("categories/test", {
            params: queryInfo,
          })
          .then((res) => {
            console.log(222, res);
          });
      });
  }
  //订阅函数，store改变，相应的UI也也要改变
  storeChange = () => {
    this.setState(store.getState());
  };

  // 输入框值改变
  changeInputValue = (e) => {
    store.dispatch({
      type: "inputChange",
      value: e.target.value,
    });
  };
  // 输入框失去焦点事件
  inputOnBlur = () => {
    // console.log(3333);
  };
  // 输入框聚焦点事件
  onFocus = () => {
    //do somethinng
  };
  //添加列表项
  addFn = () => {
    store.dispatch({
      type: "add",
    });
  };
  // 删除列表项
  deleteItem(index) {
   
    store.dispatch({
      type: "deleteItem",
      index,
    });
  }
  // 点击弹窗方法
  clickBtn = () => {
    alert(333);
  };
  // 回车键盘事件
  handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      this.addFn();
    }
  };
  // // 确认删除时执行的方法
  confirm = (index) => {
    this.deleteItem(index)
    message.success("删除成功");
  };删除成功
  // // 取消删除时执行的方法
  cancel = (e) => {
    console.log(e, 222);
    message.error("取消删除");
  };
  render() {
    return (
      <div className="box">
        <div className="inputBtnBox">
          <Input
            type="primary"
            placeholder={this.state.inputPlaceholder}
            onChange={this.changeInputValue}
            onBlur={this.inputOnBlur}
            onKeyDown={(e) => this.handleKeyDown(e)}
            value={this.state.inputValue}
            style={{ width: "50%" }}
          />
          <Button type="primary" className="btnAdd" onClick={this.addFn}>
            增加
          </Button>
        </div>
        <div className="listBox">
          <List
            className="list"
            header={<div>TodeList</div>}
            bordered
            dataSource={this.state.list}
            renderItem={(item, index) => (
              <List.Item className="listItem">
                 <span className="content">{item.content}</span>
                 <CheckOutlined 
                   className={item.done ? "done" : " "}
                  //  onClick={haveDone}
                   /> 
                <Popconfirm
                  title="Are you sure to delete this task?"
                  onConfirm={(e) => this.confirm(index)}
                  onCancel={this.cancel}
                  okText="Yes"
                  cancelText="No"
                >
                 <CloseOutlined className="del"/>
                </Popconfirm>
              </List.Item>
            )}
          />
        </div>
      </div>
    );
  }
}

export default TodoList;
